<template>
  <a-form layout="inline" :model="state.formObj" class="form">
    <a-form-item
      v-for="item in formInputs"
      :label="item.label"
      :name="item.name"
      :key="`search${item.name}`"
    >
      <a-input
        v-if="item.type === 'input'"
        v-model:value="state.formObj[item.name]"
        :placeholder="item.placeholder || `请选择${item.label}`"
      />
      <a-select
        v-else-if="item.type === 'select'"
        :style="item.style"
        :dropdownMatchSelectWidth="false"
        :multiple="item.multiple"
        v-model:value="state.formObj[item.name]"
        :placeholder="item.placeholder || `请选择${item.label}`"
        :disabled="item.disabled"
        @change="item.onChange"
      >
        <template v-for="(option, k) in item.options">
          <a-select-opt-group
            v-if="!!option.children"
            :key="`${option.label}${k}`"
          >
            <template #label>
              {{ option.label }}
            </template>
            <a-select-option
              v-for="(item, j) in option.children"
              :value="item.value"
              :key="`${item.value}_${j}`"
              :title="item.label"
              >{{ item.label }}</a-select-option
            >
          </a-select-opt-group>
          <a-select-option
            v-else
            :value="option.value"
            :key="`${option.value}_${k}`"
            :title="option.label"
            >{{ option.label }}</a-select-option
          >
        </template>
      </a-select>
      <a-date-picker
        v-else-if="item.type === 'datetime'"
        v-model:value="state.formObj[item.name]"
        :placeholder="item.placeholder || `请选择${item.label}`"
        :disabled="item.disabled"
        :disabledDate="item.disabledDate"
        :picker="item.picker"
      />
      <a-range-picker
        v-else-if="item.type === 'dateRange'"
        v-model:value="state.formObj[item.name]"
      />
      <a-tree-select
        v-else-if="item.type === 'treeSelect'"
        v-model:value="state.formObj[item.name]"
        :placeholder="item.placeholder || `请选择${item.label}`"
        :disabled="item.disabled"
        :tree-data="item.options"
        tree-node-filter-prop="label"
        :fieldNames="item.fieldNames"
        show-search
        :multiple="item.multiple"
        treeLine
        allow-clear
        tree-default-expandAll
        :dropdownMatchSelectWidth="false"
        style="width: 200px"
      />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="submit">查询</a-button>
    </a-form-item>
  </a-form>
</template>
<script setup>
import _ from "lodash";
import { reactive } from "vue";

const props = defineProps({
  formInputs: {
    required: true,
    type: Array,
  },
});
const emits = defineEmits(["submit"]);

// 根据传参构建对象
const formObj = _.reduce(
  props.formInputs,
  (arr, o) => {
    arr[o.name] = o.defaultValue;
    return arr;
  },
  {}
);
const state = reactive({ formObj });

const submit = () => {
  emits("submit", { ...state.formObj });
};

const changeFieldValue = (key, value) => {
  state.formObj[key] = value;
};

defineExpose({ changeFieldValue });
</script>
<style lang="less" scoped>
.form {
  margin-bottom: 5px;
}
</style>
